<template>
  <v-dialog v-model="dialog.visible" fullscreen hide-overlay transition="dialog-bottom-transition">
    <v-card>
      <v-toolbar dark color="primary">
        <v-btn icon dark @click="dialog.visible=false">
          <v-icon>close</v-icon>
        </v-btn>
        <v-toolbar-title>{{dialog.title}}</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items>
          <v-btn dark flat @click="postCheckCourse" v-if="dialog.data.id!==''">保存</v-btn>
          <v-btn dark flat @click="checkCourse" v-else>保存</v-btn>
        </v-toolbar-items>
      </v-toolbar>
      <v-card-text>
        <v-container class="pb-0" grid-list-md>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-layout wrap align-center>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field :rules="rule.name" label="课程名称" v-model="dialog.data.name" required></v-text-field>
              </v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-select :items="courseType" label="课程类型" item-text="name" item-value="id" v-model="dialog.data.labelId" search-input></v-select>
              </v-flex>
              <span class="subheading">难度</span>
              <v-rating class="mr-4" v-model="dialog.data.difficulty" length="5" half-increments hover color="red lighten-3" background-color="grey lighten-1"></v-rating>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field label="参与人数" :rules="rule.participants" v-model="dialog.data.participants" required></v-text-field>
              </v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field label="购物地址" :rules="rule.shopAddress" v-model="dialog.data.shopAddress" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-textarea label="描述" :rules="rule.description" v-model="dialog.data.description" auto-grow :rows="1"></v-textarea>
              </v-flex>
              <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                <span class="subheading mr-2">分数等级</span>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level0" label="缺测"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level1" label="60分以下[0,60)"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level2" label="60-70分[60,70)"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level3" label="70-80分[70,80)"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level4" label="80-90分[80,90)"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level5" label="90-100分[90,100)"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level6" label="100分以上[100)"></v-checkbox>
              </div>
              <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
              <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                <span class="subheading mr-2">性别</span>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.male" label="男"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.female" label="女"></v-checkbox>
              </div>
              <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
              <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                <span class="subheading mr-2">年级</span>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade11" label="一年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade12" label="二年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade13" label="三年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade14" label="四年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade15" label="五年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade16" label="六年级"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade21" label="初一"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade22" label="初二"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade23" label="初三"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade31" label="高一"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade32" label="高二"></v-checkbox>
                <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade33" label="高三"></v-checkbox>
              </div>
              <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
              <uploader class="ml-1" base="course/" ref="videoUploader" refs="videoUploader" title="视频上传" :max="1" :video="true">
                <template slot-scope="props">
                  <div class="upload-list show-overflow">
                    <video ref="video" :src="props.url" controls="controls" @canplaythrough="videoOnCanPlayThrough()"/>
                    <div class="d-inline-block">
                      <v-icon @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                      <v-icon @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                    </div>
                    <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                      <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                    </div>
                  </div>
                </template>
                <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                  <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                </div>
              </uploader>
              <v-flex xs12></v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field label="视频长度" :rules="rule.videoTimeLength" v-model="dialog.data.videoTimeLength" required></v-text-field>
              </v-flex>
              <v-flex class="mr-4" xs12 sm6 md3 lg2>
                <v-text-field :rules="rule.trainTime" label="训练时间（秒）" v-model="dialog.data.trainTime" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <description ref="description" v-model="dialog.data.detailDescription"></description>
              </v-flex>
              <v-flex xs12 class="ml-0 mr-0 mt-0 mb-0"></v-flex>
              <uploader class="ml-1" base="course/item/" ref="picUploader" refs="picUploader" title="图片上传" :max="1" :pic="true">
                <template slot-scope="props">
                  <div class="upload-list">
                    <v-img :src="props.url" aspect-ratio="1" class="grey lighten-2" contain/>
                    <div style="flex-direction: column;" class="upload-list-hover d-flex" v-if="props.tool">
                      <div class="d-flex justify-space-between mt-3">
                        <v-icon class="font-white" @click="$refs[props.refs].left(props.index)">arrow_left</v-icon>
                        <v-icon class="font-white" @click="$refs[props.refs].right(props.index)">arrow_right</v-icon>
                      </div>
                      <div class="d-flex justify-space-between">
                        <v-icon class="font-white" @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                        <v-icon class="font-white" @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                      </div>
                    </div>
                    <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                      <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                    </div>
                  </div>
                </template>
                <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                  <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                </div>
              </uploader>
            </v-layout>
          </v-form>
        </v-container>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
import uploader from '../../components/Uploader'
import { putCourse, postCourse } from '../../api/course'
import { getObject } from '../../api/oss'
import description from './Description'
export default {
  name: 'Dialog',
  components: {
    uploader,
    description
  },
  props: {
    courseType: {}
  },
  data: () => ({
    dialog: {
      visible: false,
      data: {
        id: '',
        name: '',
        labelId: 0,
        difficulty: 0,
        participants: 0,
        videoKey: '',
        videoTimeLength: 0,
        shopAddress: '',
        description: '',
        picUrl: '',
        trainTime: 0,
        detailDescription: '',
        level0: false,
        level1: false,
        level2: false,
        level3: false,
        level4: false,
        level5: false,
        level6: false,
        male: false,
        female: false,
        grade11: false,
        grade12: false,
        grade13: false,
        grade14: false,
        grade15: false,
        grade16: false,
        grade21: false,
        grade22: false,
        grade23: false,
        grade31: false,
        grade32: false,
        grade33: false
      },
      title: ''
    },
    rule: {
      name: [v => !!v || '课程名称必须填写', v => (v && v.length <= 255) || '课程名称必须小于255个字符'],
      participants: [v => !!(v.toString()) || '参与人数必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '参数人数必须是自然数'],
      shopAddress: [v => (v && v.length <= 255) || '购物地址必须小于255个字符'],
      description: [v => !!v || '描述必须填写', v => (v && v.length <= 255) || '描述必须小于255个字符'],
      videoTimeLength: [v => !!(v.toString()) || '视频长度必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '视频长度必须是自然数'],
      trainTime: [v => !!(v.toString()) || '训练时间必须填写', v => (v.toString() && (/(^0$)|(^[1-9]\d*$)/.test(v.toString()))) || '训练时间必须是自然数']
    },
    valid: true
  }),
  methods: {
    show (title) {
      this.dialog.title = title
      this.dialog.visible = true
    },
    checkCourse () {
      if (this.$refs.form.validate()) {
        if (this.$refs.picUploader.fileList.length !== 0) {
          this.dialog.data.picUrl = this.$refs.picUploader.fileList[0].src
        }
        if (this.dialog.data.id === '') {
          let data = {
            name: this.dialog.data.name,
            labelId: this.dialog.data.labelId,
            difficulty: this.dialog.data.difficulty,
            participants: parseInt(this.dialog.data.participants),
            videoKey: this.dialog.data.videoKey,
            videoTimeLength: parseInt(this.dialog.data.videoTimeLength),
            shopAddress: this.dialog.data.shopAddress,
            description: this.dialog.data.description,
            picUrl: this.dialog.data.picUrl,
            trainTime: parseInt(this.dialog.data.trainTime),
            detailDescription: this.dialog.data.detailDescription,
            level0: this.dialog.data.level0,
            level1: this.dialog.data.level1,
            level2: this.dialog.data.level2,
            level3: this.dialog.data.level3,
            level4: this.dialog.data.level4,
            level5: this.dialog.data.level5,
            level6: this.dialog.data.level6,
            male: this.dialog.data.male,
            female: this.dialog.data.female,
            grade11: this.dialog.data.grade11,
            grade12: this.dialog.data.grade12,
            grade13: this.dialog.data.grade13,
            grade14: this.dialog.data.grade14,
            grade15: this.dialog.data.grade15,
            grade16: this.dialog.data.grade16,
            grade21: this.dialog.data.grade21,
            grade22: this.dialog.data.grade22,
            grade23: this.dialog.data.grade23,
            grade31: this.dialog.data.grade31,
            grade32: this.dialog.data.grade32,
            grade33: this.dialog.data.grade33
          }
          putCourse(data).then((res) => {
            this.dialog.data.id = res.data.id
            this.$emit('update')
            this.dialog.visible = false
          })
        }
      }
    },
    postCheckCourse () {
      if (this.$refs.form.validate()) {
        if (this.$refs.picUploader.fileList.length !== 0) {
          this.dialog.data.picUrl = this.$refs.picUploader.fileList[0].src
        }
        let data = {
          id: this.dialog.data.id,
          name: this.dialog.data.name,
          labelId: this.dialog.data.labelId,
          difficulty: this.dialog.data.difficulty,
          participants: parseInt(this.dialog.data.participants),
          videoKey: this.dialog.data.videoKey,
          videoTimeLength: parseInt(this.dialog.data.videoTimeLength),
          shopAddress: this.dialog.data.shopAddress,
          description: this.dialog.data.description,
          picUrl: this.dialog.data.picUrl,
          trainTime: parseInt(this.dialog.data.trainTime),
          detailDescription: this.dialog.data.detailDescription,
          level0: this.dialog.data.level0,
          level1: this.dialog.data.level1,
          level2: this.dialog.data.level2,
          level3: this.dialog.data.level3,
          level4: this.dialog.data.level4,
          level5: this.dialog.data.level5,
          level6: this.dialog.data.level6,
          male: this.dialog.data.male,
          female: this.dialog.data.female,
          grade11: this.dialog.data.grade11,
          grade12: this.dialog.data.grade12,
          grade13: this.dialog.data.grade13,
          grade14: this.dialog.data.grade14,
          grade15: this.dialog.data.grade15,
          grade16: this.dialog.data.grade16,
          grade21: this.dialog.data.grade21,
          grade22: this.dialog.data.grade22,
          grade23: this.dialog.data.grade23,
          grade31: this.dialog.data.grade31,
          grade32: this.dialog.data.grade32,
          grade33: this.dialog.data.grade33
        }
        postCourse(data).then((res) => {
          this.dialog.data.id = res.data.id
          this.$emit('update')
          this.dialog.visible = false
        })
      }
    },
    get (data) {
      this.dialog.data = data
      this.$refs.videoUploader.fileList = []
      this.$refs.description.get(data.detailDescription)
      if (this.dialog.data.videoKey !== '') {
        getObject(this.dialog.data.videoKey).then((res) => {
          this.$refs.videoUploader.fileList.push({
            src: res.data.signedUrl,
            toolVisible: false,
            progressVisible: false,
            progress: 0
          })
        })
      }
      if (this.dialog.data.picUrl !== '') {
        this.$refs.picUploader.fileList.push({
          src: this.dialog.data.picUrl,
          toolVisible: false,
          progressVisible: false,
          progress: 0
        })
      }
    },
    clear () {
      this.dialog.data = {
        id: '',
        name: '',
        labelId: 0,
        difficulty: 0,
        participants: 0,
        videoKey: '',
        videoTimeLength: 0,
        shopAddress: '',
        description: '',
        picUrl: '',
        trainTime: 0,
        detailDescription: '',
        level0: false,
        level1: false,
        level2: false,
        level3: false,
        level4: false,
        level5: false,
        level6: false,
        male: false,
        female: false,
        grade11: false,
        grade12: false,
        grade13: false,
        grade14: false,
        grade15: false,
        grade16: false,
        grade21: false,
        grade22: false,
        grade23: false,
        grade31: false,
        grade32: false,
        grade33: false
      }
      this.$nextTick(function () {
        this.$refs.videoUploader.fileList = []
        this.$refs.picUploader.fileList = []
        this.$refs.description.get('')
      })
    },
    videoOnCanPlayThrough () {
      this.dialog.data.videoTimeLength = Math.ceil(this.$refs.video.duration / 60)
      this.dialog.data.videoKey = unescape(this.$refs.video.src.substring(this.$refs.video.src.indexOf('.com') + 5, this.$refs.video.src.indexOf('?')))
    }
  }
}
</script>

<style scoped>
</style>
